{%- liquid
  assign show_padding = true
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
      assign show_padding = false
    when 'black'
      assign background_color = 'bg-black'
  endcase
-%}
{% liquid
  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign btn_style = 'white'
      assign richtext_link_style = 'richtext-link-light'
    else
      assign text_color = ''
      assign btn_style = 'primary'
      assign richtext_link_style = 'richtext-link-default'
  endcase
%}
{%- liquid
    case section.settings.text_alignment
      when 'center'
        assign text_alignment = 'text-center'
      when 'left'
        assign text_alignment = 'text-start'
      else
        assign text_alignment = ''
    endcase
  %}

  {% for block in section.blocks %}
    {% assign length= forloop.length %}
    {%break%}
  {%endfor%}
<div class="{% if show_padding %}py-section{% else %}my-section{% endif %} {{ background_color }}">
<div class="{{ text_alignment }} container {{ text_color }}">
    {% if section.settings.heading != blank %}
    <h5 class="fs-2 mb-md-7 mb-5">{{ section.settings.heading }}</h5>
    {% endif %}
    {% comment %}<!-- max对应一行最多能放多少个 -->{% endcomment %}
    {% assign max = section.settings.columns_per_row %} 
    {% comment %}<!-- length对应填入了多少个block -->{% endcomment %}
    {% assign length= section.blocks.size %}
    {% comment %}<!-- quo是length除以max得到的商 -->{% endcomment %}
    {% assign quo=length | divided_by:max %}
    {% comment %}<!-- rem是length除以max得到的余数 -->{% endcomment %}
    {% assign rem=length | modulo:max %}
    {% comment %}<!-- 总体思路，每轮取max个block，实际取到了多少个block就按照对应数目排布 -->
    <!-- 如果余数大于0，表示一共要取quo+1轮blocks，所以rd=quo+1,反之rd=quo -->{% endcomment %}
    {% if rem > 0 %}
    {% assign rd = quo | plus: 1 %}
    {% else %}
    {% assign rd = quo %}
    {% endif %}
    {% if length > 0 %}
    <div class="">
    {% for i in (1..rd) %}
    {% comment %}<!-- 在前quo轮每轮（每行）按照max个排布 -->{% endcomment %}
        {%if i <= quo %}
            {% assign num=max %}
    {% comment %}<!-- 在最后一轮按照实际剩余数目（即余数rem）排布 -->{% endcomment %}
        {% else %}
            {% assign num=rem %}
        {%endif%}
        {% assign off = i | minus: 1 | times: max %}
        {% assign lim = i | minus: 1 | times: max | plus: num | minus: 1 %}
        <div class="row row-cols-md-{{num}} row-cols-1 {% unless forloop.last %} pb-md-9 {% endunless %} ">
        {% for j in (off..lim) %}
            <div class="col {% if j != 0 %}mt-5{%endif%} mt-md-0">
                <div class="{% if num >= 3 %} mw-text-md-2 {% else %} mw-text-md-4{% endif %} mw-text-4  mx-auto ">
                    <div class="pb-1">
                      {% if section.blocks[j].settings.image %}
                        <img width="auto" height="auto" loading="lazy" class="mb-3 icon-size object-fit-cover" alt="{{ section.blocks[j].settings.image.alt }}" src="{{section.blocks[j].settings.image | img_url: '74x74' }}"> 
                      {% else %}
                      {{ 'collection-1' | placeholder_svg_tag:'mb-3 icon-size' }}
                      {% endif %}
                    </div>
                    {% unless section.blocks[j].settings.heading == blank %}
                    <h5 class="">{{ section.blocks[j].settings.heading }}</h5>
                    {% endunless %}
                    {% unless section.blocks[j].settings.text == blank %}
                    <div class="mb-3 no-last-margin richtext-with-link {{ richtext_link_style }}">{{section.blocks[j].settings.text }}</div>
                    {% endunless %}
                    {% unless section.blocks[j].settings.button_label == blank %}
                    <a {% unless section.blocks[j].settings.button_link == blank %}href="{{ section.blocks[j].settings.button_link }}" {%- if section.blocks[j].settings.button_link contains 'https://' -%}target="_blank" rel="noopener nofollow"{%- endif -%}{% endunless %}
                    class="btn btn-link link-{{ btn_style }}">
                    {{ section.blocks[j].settings.button_label }}
                    </a>
                    {% endunless %}
                </div>
            </div>
        {% endfor %}
        </div>
    {%endfor%}
    </div>
    {% endif %}
</div>
</div>
  
  {% schema %}
  {
    "name": "Text columns with icons",
    "tag": "section",
    "class":"text-columns-with-icons",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Text columns with icons"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "white",
             "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "black"
      },
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "white"
      },
      {
        "type": "radio",
        "id": "text_alignment",
        "label": "Text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "center"
      },
      {
        "type": "range",
        "id": "columns_per_row",
        "min": 2,
        "max": 4,
        "step": 1,
        "default": 3,
        "label": "Icon per row"
      }
    ],
    "blocks": [
      {
        "type": "column",
        "name": "Column",
        "settings": [
          {
            "type": "text",
            "id": "heading",
            "default": "Text columns with icons",
            "label": "Heading"
          },
          {
            "type": "richtext",
            "id": "text",
            "default": "<p>Describe the feature，service or product that this icon represents</p>",
            "label": "Text"
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Icon"
          },
          {
            "type": "text",
            "id": "button_label",
            "default": "Button label",
            "label": "Button label"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
          }
        ]
      }
    ]
  }
  {% endschema %}


{%- comment -%} "presets": [
  {
    "name": "Text columns with icons",
    "blocks": [
      {
        "type": "column"
      },
      {
        "type": "column"
      },
      {
        "type": "column"
      }
      ]
  }
] {%- endcomment -%}